mjml-invoice
Display a table of items with calculated total price.
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column width="100%">
<mj-invoice format="0,00.00€" intl="name:Product Name">
<mj-invoice-item name="TV" price="549€" quantity="1" />
<mj-invoice-item name="DVD - Iron Man II" price="22.99€" quantity="2" />
</mj-invoice>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
attribute | unit | description | default value |
---|
color | color | text header & footer color | #b9b9b9 |
font-family | string | font name | Roboto, Ubuntu, Helvetica, Arial, sans-serif |
font-size | px/em | font size | 13px |
line-height | percent/px | space between lines | 22px |
border | string | border-bottom header & border-top footer | 1px solid #ecedee |
container-background-color | color | inner element background color | n/a |
padding | px | supports up to 4 parameters | 10px 25px |
padding-top | px | top offset | n/a |
padding-bottom | px | bottom offset | n/a |
padding-left | px | left offset | n/a |
padding-right | px | right offset | n/a |
intl | string | formatted string to set wording for header and footer | "name:Name;quantity:Quantity;price:Price" |
format | string | how to format total price, based on numeraljs | n/a |
mjml-invoice-item
Display a row in an mj-invoice
component
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-invoice format="0,00.00€" intl="name:Product Name">
<mj-invoice-item name="TV" price="549€" quantity="1" />
<mj-invoice-item name="DVD - Iron Man II" price="22.99€" quantity="2" />
</mj-invoice>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
attribute | unit | description | default value |
---|
color | color | text color | #747474 |
font-family | string | font name | Roboto, Ubuntu, Helvetica, Arial, sans-serif |
font-size | px/em | font size | 14px |
line-height | percent/px | space between lines | 22px |
border | string | border-bottom header & border-top footer | 1px solid #ecedee |
text-align | string | css text align | left (quantity column: right) |
padding | px | supports up to 4 parameters | 10px 25px |
padding-top | px | top offset | n/a |
padding-bottom | px | bottom offset | n/a |
padding-left | px | left offset | n/a |
padding-right | px | right offset | n/a |
name | string | item name | n/a |
price | string/number | price (should already be formatted) | 0 |
quantity | number | quantity | 0 |